<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>suning官方网站</title>
    <link rel="stylesheet" href="./../public/swiper/swiper-bundle.css">
    <link rel="icon" href="http://www.suning.com/favicon.ico" type="image/x-icon"> 
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3551598_spzw9kee90c.css">
</head>
<body>
    <!-- header -->
    <div id="header">
        <div class="header">
            <img src="./../public/images/title.png" alt="">
        </div>
    </div>
    <!-- nav -->
    <div id="nav">
        <div class="nav">
            <div class="nav-left">
                    <ul class="left-container">
                        <li>
                            <div class="top">
                                <p>网站导航</p>
                                <i class="iconfont icon-xiala1"></i>
                            </div>
                            <div class="top-menu">
                                <ul>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                            
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="top">
                                <p>商家入驻</p>
                                <i class="iconfont icon-xiala1"></i>
                            </div>
                            <div class="top-menu">
                                <ul>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                            
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="top">
                                <p>客户服务</p>
                                <i class="iconfont icon-xiala1"></i>
                            </div>
                            <div class="top-menu">
                                <ul>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                                    <li>hello world</li>
                            
                                </ul>
                            </div>
                        </li>
                        <li>
                            <p>网页无障碍</p>
                        </li>
                        <li>
                            <div class="top">
                                <i class="iconfont icon-mianxingdingwei"></i>
                                <p>连云港</p>
                                <i class="iconfont icon-xiala1"></i>
                            </div>
                            <div class="top-menu">
                                    <dl>
                                        <dd>hello world</dd>
                                        <dd>hello world</dd>
                                        <dd>hello world</dd>
                                        <dd>hello world</dd>
                                        <dd>hello world</dd>
                                
                                    </dl>
                                </div>
                        </li>
                    </ul>
            </div>
            <div class="nav-right">
                <ul class="right-container">
                    <li class="login"><a href="./login.html">请登录</a></li>
                    <li class="register"><a href="./register.html">注册有礼</a></li>
                    <li>
                        <div class="top">
                            <p>我的订单</p>
                            <i class="iconfont icon-xiala1"></i>
                        </div>
                        <div class="top-menu">
                            <ul>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                            </ul>
                    </li>
                    <li>
                        <div class="top">
                            <p>我的易购</p>
                            <i class="iconfont icon-xiala1"></i> 
                        </div>
                        <div class="top-menu">
                            <ul>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                            </ul>
                    </li>
                    <li>苏宁会员</li>
                    <li>
                        <div class="top">
                            <p>购物车</p>
                            <i class="iconfont icon-xiala1"></i>
                        </div>
                        <div class="top-menu">
                            <ul>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                            </ul>
                    </li>
                    <li>易付宝</li>
                    <li>企业采购</li>
                    <li>
                        <div class="top">
                                <p>手机苏宁</p>
                                <i class="iconfont icon-xiala1"></i>
                        </div>
                        <div class="top-menu">
                            <ul>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                                <li>hello world</li>
                            </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- search -->
    <div id="search">
        <div id="search-container">
            <div class="logo">
                <img src="./../public/images/logo.png" alt="">
            </div>
            <div class="search">
                <div>
                    <i class="iconfont icon-Magnifier"></i>
                    <input class="ipt_search" type="text" placeholder="爆款每1000减100">
                    <ol class="res_search"></ol>
                    <button>搜索</button>
                </div>
                <ul>
                    <li>手机</li>
                    <li>冰箱</li>
                    <li>电视</li>
                    <li>手机</li>
                    <li>冰箱</li>
                    <li>电视</li>
                    <li>ipad</li>
                    <li>手机</li>
                    <li>冰箱</li>
                    <li>电视</li>
                    <li>手机</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- banner 原生结构 -->
    <div id="banner">
        <div class="banner-nav">
            <div class="assort">
                <i class="iconfont icon-fenlei"></i>
                <span>分类</span>
                <ol class="assort-menu">
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">空调</a>
                        <em>/</em>
                        <a href="./assort-detail.html">冰箱</a>
                        <em>/</em>
                        <a href="./assort-detail.html">洗衣机</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">电视</a>
                        <em>/</em>
                        <a href="./assort-detail.html">视听影音</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">手机</a>
                        <em>/</em>
                        <a href="./assort-detail.html">配件</a>
                        <em>/</em>
                        <a href="./assort-detail.html">运营商</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">厨房大电</a>
                        <em>/</em>
                        <a href="./assort-detail.html">卫浴</a>
                        <em>/</em>
                        <a href="./assort-detail.html">饮水</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">厨房小电</a>
                        <em>/</em>
                        <a href="./assort-detail.html">生活电器</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">电脑</a>
                        <em>/</em>
                        <a href="./assort-detail.html">相机</a>
                        <em>/</em>
                        <a href="./assort-detail.html">配件</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">家具</a>
                        <em>/</em>
                        <a href="./assort-detail.html">家装</a>
                        <em>/</em>
                        <a href="./assort-detail.html">家纺</a>
                        <em>/</em>
                        <a href="./assort-detail.html">灯具</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">食品</a>
                        <em>/</em>
                        <a href="./assort-detail.html">酒水</a>
                        <em>/</em>
                        <a href="./assort-detail.html">生鲜</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./assort-detail.html">母婴</a>
                        <em>/</em>
                        <a href="./assort-detail.html">玩具</a>
                        <em>/</em>
                        <a href="./assort-detail.html">童装</a>
                        <em>/</em>
                        <a href="./assort-detail.html">童床</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./detail.html">美妆</a>
                        <em>/</em>
                        <a href="#">个护</a>
                        <em>/</em>
                        <a href="#">清洁</a>
                        <em>/</em>
                        <a href="#">宠物</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./detail.html">女装</a>
                        <em>/</em>
                        <a href="#">男装</a>
                        <em>/</em>
                        <a href="#">内衣</a>
                        <em>/</em>
                        <a href="#">鞋靴</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./detail.html">运动</a>
                        <em>/</em>
                        <a href="#">户外</a>
                        <em>/</em>
                        <a href="#">骑行</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./detail.html">箱包</a>
                        <em>/</em>
                        <a href="#">钟表</a>
                        <em>/</em>
                        <a href="#">珠宝</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./detail.html">医药健康</a>
                        <em>/</em>
                        <a href="#">计生情趣</a>
                    </li>
                    <li>
                        <i class="iconfont icon-kongtiao"></i>
                        <a href="./detail.html">清洗</a>
                        <em>/</em>
                        <a href="#">维修</a>
                        <em>/</em>
                        <a href="#">安装</a>
                        <em>/</em>
                        <a href="#">洗衣</a>
                    </li>
                    <div class="assort-detail"><a href="./detail.html">hello world</a></div>
                </ol>
            </div>
            <ul>
                <li><img class="icon" src="http://image2.suning.cn/uimg/cms/img/161185054090483911.png" alt=""></li>
                <li>苏宁家电</li>
                <li>手机数码</li>
                <li>苏宁超市</li>
                <li>家具建材</li>
                <li>生活家电</li>
                <li>帮客服务</li>
            </ul>
            <div class="welcome">提示</div>
        </div>
        <!-- 轮播图容器 -->
        <div class="container">
            <!-- 所有图片容器 -->
            <div class="wrapper">
                <div class="slide active" ><img src="./../public/images/banner1.png" alt=""></div>
                <div class="slide prev">
                    <img src="./../public/images/banner2.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="./../public/images/banner3.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="./../public/images/banner4.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="./../public/images/banner5.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="./../public/images/banner6.jpg" alt="">
                </div>
            </div>
            <!-- 切换按钮 -->
            <div class="button-prev">
                <i class="iconfont icon-xiaoyuhao"></i>
            </div>
            <div class="button-next">
                <i class="iconfont icon-dayuhao"></i>
            </div>
            <!-- 分页器 -->
            <div class="pagination-container">
                <div class="pagination">
                    <!-- 内部元素根据图片数量，使用js语法自动生成 -->
                    <!-- <span class="active"></span> -->
                </div>
            </div>
        </div>
    </div>
    <!-- content -->
    <div id="content">
        <div class="content">
            <div class="top1">
                <div class="title">
                    <h2><img src="./../public/images/苏宁家电.png" alt=""></h2>
                    <span>更多</span>
                </div>
                <ul class="data">
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>        
                </ul>
            </div>
            <div class="top1">
                <div class="title">
                    <h2><img src="./../public/images/苏宁家电.png" alt=""></h2>
                    <span>更多</span>
                </div>
                <ul class="data">
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>        
                </ul>
            </div>
            <div class="top1">
                <div class="title">
                    <h2><img src="./../public/images/苏宁家电.png" alt=""></h2>
                    <span>更多</span>
                </div>
                <ul class="data">
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>
                    <li>
                        <img src="https://imgservice1.suning.cn/uimg1/b2c/image/IAT93lBYlHXIxhZkfEkPrQ.jpg_200w_200h_4e" alt="">
                        <h3>海尔(Haier)515升 对开门冰箱 双变频无霜 纤薄机身 多路送风 节能低音 家用海尔冰箱 BCD-515WDPD</h3>
                        <h2>3599.00</h2>
                    </li>        
                </ul>
            </div>
            <div class="bottom2">
                <div class="title">
                    <h2><a href="#">为你推荐</a></h2>
                    <span>更多</span>
                </div>
                    <div class="swiper-container bottom-right">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide list-banner">
                                <img src="./../public/images/swiper1.png" alt="">
                                <img src="./../public/images/swiper2.png" alt="">
                                <img src="./../public/images/swiper3.jpg" alt="">
                            </div>
                            <div class="swiper-slide list-banner">
                                <img src="./../public/images/swiper4.jpg" alt="">
                                <img src="./../public/images/swiper5.jpg" alt="">
                                <img src="./../public/images/swiper6.png" alt="">
                            </div>
                            <div class="swiper-slide list-banner">
                                <img src="./../public/images/swiper3.jpg" alt="">
                                <img src="./../public/images/swiper5.jpg" alt="">
                                <img src="./../public/images/swiper1.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- channel -->
    <!-- <div id="channel">
    </div> -->
    <!-- recommend -->
    <div id="recommend">
        <div class="title">
            <img src="./../public/images/为你推荐.png" alt="">
        </div>
        <ul class="ajax_content">
            <!-- <li class="data-container">
                <img src="" alt="">
                <h3></h3>
                <h2></h2>
            </li> -->
        </ul>
    </div>
    <!-- promise -->
    <div id="promise"></div>
    <!-- list -->
    <div id="list"></div>
    <!-- foot -->
    <div id="foot"></div>
    <script src="./../public/swiper/swiper-bundle.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="./../public/javascripts--库/lazyload.js"></script>
</body>
</html>